<template>
  <div style="width: 100vw;overflow: hidden">
    <pagetop active="6" :logoPic="logoPic"></pagetop>
    <div class="imgBox">
      <!-- <img src="../images/officalPic/98.png" alt=""> -->
      <div :style="style"></div>
      <div class="text">
        <div class="line"></div>
        <div style="float:left;margin-left: 10px">
          <p style="font-size: 48px;">联系我们</p>
          <div class="clear"></div>
          <p style="font-size: 34px;letter-spacing: 3px">contact us</p>
        </div>

      </div>
    </div>
    <div class="contactWay">
      <p class="contact">联系方式</p>
      <div class="underWay">
        <div class="box">
          <img src="../images/officalPic/address.png" alt="" class="headImg">
          <p class="hea">公司地址</p>
          <span style="text-align: left">{{way.position}}</span>
        </div>
        <div style="margin-left: 27px;margin-right: 27px"  class="box">
          <img src="../images/officalPic/lianxi.png" alt="" class="headImg">
            <p  class="hea">联系方式</p>
            <span>QQ:{{way.contactqq}}</span>
            <span style="margin-top: 5px;display:inline-block;">微博:{{way.weibo}}</span>
            <span style="margin-top: 5px">联系电话:{{way.tel}}</span>
            <span style="margin-top: 5px">QQ邮箱:{{way.qqemail}}</span>
            <span style="margin-top: 5px">163邮箱:{{way.wyemail}}</span>
        </div>
        <div  class="box">
          <img src="../images/officalPic/weChat.png" alt="" class="headImg">
          <p class="hea">关注微信</p>
          <p>
            <img :src="way.wxphoto" alt="" style="top: 93px;" class="code">
          </p>
        </div>

      </div>
    </div>
    <div class="here">
      <p>我们在这</p>
      <div style="width: 900px;height: 440px;margin: 20px auto;box-shadow:0 0 8px 4px #ccc">
        <contactmap></contactmap>
      </div>

    </div>
    <pagebottom :napinAddress="way.position"></pagebottom>
  </div>
</template>

<script>
import pagetop from "../components/common/pageTop";
import pagebottom from "../components/common/pageBottom";
import contactmap from "../components/contactUs/map";
import request from "@/request/index.js";
export default {
  name: "contactUs",
  components: {
    pagetop,
    pagebottom,
    contactmap
  },
  data() {
    return {
      way: {},
      style: {
        backgroundImage: "url(" + require("../images/officalPic/98.png") + ")",
        backgroundPosition: "center center",
        backgroundSize: "1920px 560px",
        height: "560px",
        width: "100%"
      },
      logoPic:"",
    };
  },
  
  created() {
    this.loading=this.$loading({
      lock: true,
      // text: 'Loading',
      // spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.6)',
      target: document.querySelector('body'),
      
    });
    request.GetContact(this);
    request.home(this);
  }
};
</script>

<style scoped lang="scss">
.here {
  width: 100%;
  height: 583px;
  margin-top: -99px;
  p {
    font-size: 24px;
    color: #333;
    margin-top: 39px;
    text-align: center;
  }
}
.imgBox {
  width: 100vw;
  height: 600px;
  .text {
    width: 30vw;
    position: relative;
    top: -52%;
    left: 14%;
    .line {
      width: 6px;
      height: 90px;
      background: #fff;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      float: left;
    }
    p {
      color: #fff;
      margin-top: -7px;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.contactWay {
  color: #333333;
  width: 100vw;
  height: 420px;
  background: #f5f5f5;
  overflow: hidden;
  position: relative;
  top: -99px;
  .contact {
    font-size: 24px;
    color: #333;
    text-align: center;
    padding-top: 39px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .underWay {
    width: 1200px;
    display: flex;
    margin: 0px auto;
    .box {
      flex: 1;
      width: 300px;
      height: 220px;
      border: 1px solid #999;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      margin-top: 78px;
      position: relative;
      text-align: center;
      .code {
        width: 84px;
        height: 84px;
        display: inline-block;
        // margin: 0px auto;
        // margin-left: 35%;
        margin-top: 10px;
      }
      span {
        width: 80%;
        height: auto;
        display: inline-block;
        margin: 0px auto;
        text-align: center;
        font-size: 14px;
        // margin-left: 10%;
        
        margin-top: 15px;
      }
      .hea {
        font-size: 16px;
        margin-top: 59px;
        text-align: center;
      }
      .headImg {
        width: 80px;
        height: 80px;
        display: inline-block;
        margin: 0px auto;
        position: absolute;
        top: -40px;
        left: 36%;
      }
    }
  }
}
</style>
